<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 问答页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        #questionInput {
            width: 300px;
            padding: 10px;
            margin-right: 10px;
        }

        #submitButton {
            padding: 10px 20px;
        }

        #responseArea {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 100px;
        }
    </style>
</head>

<body>
<input type="text" id="questionInput" placeholder="请输入你的问题">
<button id="submitButton">提交问题</button>
<div id="responseArea"></div>

<script>
    document.getElementById('submitButton').addEventListener('click', function () {
        const question = document.getElementById('questionInput').value;
        if (question) {
            var myHeaders = new Headers();
            myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
            myHeaders.append("Authorization", "Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImxvZ2luX3VzZXJfa2V5IjoiNzA1ZTk2ZmItYTVkZC00N2FmLWExYTQtMzNiNzZiMzJiMTBmIn0.iYCoLl2-ccbwNAXUxO6iFQZUQYlAZbX-4z59qiBZVEI9zb6gSViljnHun_c67Rf8aWOmym6eW4DnjPASs2SNnw");
            myHeaders.append("Accept", "*/*");
            myHeaders.append("Host", "localhost:82");
            myHeaders.append("Connection", "keep-alive");
            // 移除 Content-Type，让浏览器自动设置
            // myHeaders.append("Content-Type", "multipart/form-data; boundary=--------------------------639760111382759776681905");

            var formdata = new FormData();
            formdata.append("question", question);

            var requestOptions = {
                method: 'POST', // 修改为 POST 请求
                headers: myHeaders,
                body: formdata,
                redirect: 'follow'
            };

            fetch("http://localhost:82/dev-api/deepseek/stream", requestOptions)
                .then(response => response.text())
                .then(result => {
                    const responseArea = document.getElementById('responseArea');
                    const chunks = result.split('\n').filter(line => line.trim().startsWith('data:'));
                    let fullResponse = '';
                    chunks.forEach(chunk => {
                        try {
                            const data = JSON.parse(chunk.replace('data: ', ''));
                            const content = data.choices[0].delta.content;
                            if (content) {
                                fullResponse += content;
                            }
                        } catch (error) {
                            console.error('解析数据时出错:', error);
                        }
                    });
                    responseArea.textContent = fullResponse;
                })
                .catch(error => {
                    console.log('error', error);
                    const responseArea = document.getElementById('responseArea');
                    responseArea.textContent = '请求出错，请稍后重试。';
                });
        }
    });
</script>
</body>

</html>